<template>
    <div class="login-container">
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label>邮箱</label>
          <input 
            type="email" 
            v-model="formData.email" 
            required
            placeholder="请输入邮箱"
          >
        </div>
  
        <div class="form-group">
          <label>密码</label>
          <input
            type="password"
            v-model="formData.password"
            required
            placeholder="请输入密码"
          >
        </div>
  
        <button 
          type="submit" 
          :disabled="isSubmitting"
          class="submit-btn"
        >
          {{ isSubmitting ? '登录中...' : '登录' }}
        </button>
  
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
      </form>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  
  const formData = reactive({
    email: '',
    password: ''
  })
  
  const isSubmitting = ref(false)
  const errorMessage = ref('')
  const router = useRouter()
  
  const handleSubmit = async () => {
    try {
      isSubmitting.value = true
      errorMessage.value = ''
  
      // 表单验证
      if (!formData.email || !formData.password) {
        throw new Error('请填写完整信息')
      }
  
      // 模拟API请求
      const response = await axios.post('/api/login', formData)
  
      // 处理成功登录
      if (response.data.success) {
        router.push('/dashboard')
      }
    } catch (error) {
      errorMessage.value = error.response?.data?.message || error.message
    } finally {
      isSubmitting.value = false
    }
  }
  </script>
  
  <style scoped>
  .login-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .submit-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .submit-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
  }
  
  .error-message {
    color: #dc3545;
    margin-top: 1rem;
    text-align: center;
  }
  </style>